import { defineComponent, ref } from "vue";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";

export const BaoHanGuanJianZi = defineComponent({
  name: "BaoHanGuanJianZi",
  setup() {
    const tableData = ref<any>([]);
    const columns: any = [
      {
        label: "序号",
        type: "index",
        width: "70"
      },
      {
        label: "通用名",
        prop: "TongYongMingMingCheng"
      },
      {
        label: "操作",
        fixed: "right",
        width: "100",
        // slot: "caoZuo"
        cellRenderer: (scope: any) => (
          <>
            <el-tooltip className="box-item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" link icon={EditPen} onClick={() => onOpenEditRole("edit", scope.row)}></el-button>
            </el-tooltip>
            <el-tooltip className="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link icon={Delete} onClick={() => deleteAccount(scope.row)}></el-button>
            </el-tooltip>
          </>
        )
      }
    ];
    const tableDataClick = (data: any) => {
      console.log(data, "每一行的点击");
    };
    const onOpenAddRole = type => {
      console.log(type);
    };
    const deleteAccount = (row: Partial<any> = {}) => {
      console.log(row);
      // let obj = {
      //   TongYongMingID: row.TongYongMingID
      // };
      // useHandleData(DeleteTongYongMingDel, obj, `删除【${row.TongYongMingMingCheng}】`).then(() => {
      //   searchFormClick();
      // });
    };
    // 编辑
    const onOpenEditRole = (type: string, row: any) => {
      console.log(type, row);
    };
    let tableLiving = () => {
      return (
        <pure-table
          ref="tableRef"
          row-key={row => row.tid}
          border={true}
          adaptive={true}
          align-whole="center"
          show-overflow-tooltip={true}
          data={tableData.value}
          columns={columns}
          className="pure-table"
          highlight-current-row={true}
          onRowClick={(data: any) => tableDataClick(data)}
        ></pure-table>
      );
    };
    return () => {
      return (
        <div className="BaoHanGuanJianZi">
          <div class="BaoHanGuanJianZi-table px-20">
            <div>
              <el-button size="default" icon={CirclePlus} onClick={() => onOpenAddRole("add")} type="primary">
                添加
              </el-button>
            </div>
            <div class="mt-20">{tableLiving()}</div>
          </div>
        </div>
      );
    };
  }
});
